<template>
  <div class="login">
    <div class="login-body">
      <div class="hread">
        <img src="../assets/logo.png" />
      </div>
      <!-- form上可以指定表单内label的宽度 -->
      <!-- 表单要进行绑定一个数据对象，item里面调用这个对象对应的属性 -->
      <!-- 绑定rules添加表单规则对象，每个属性为对象数组，每个规则为一个对象 -->
      <!-- ref引用了表单的实例对象 ，相当于将表单的实例对象发出（在该文件的this的$refs中显示）-->
      <el-form :model="form" :rules="rules" ref="loginFromRef" class="login-form">
        <!-- item可以指定label显示左边内容 -->
       <!-- 用prop进行校验 ,需要用在item上-->
       <!-- 表单验证的名要和input数据绑定的字段相同 -->
        <el-form-item prop="username"> 
          <el-input placeholder="账号" v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" v-model="form.password" type="password" ></el-input>
        </el-form-item>
        <el-form-item class="bt">
            <!-- :loading="true"为true的时候不能点击 -->
          <el-button type="primary" size="small" round :loading="isLogin" v-on:click="login">登录</el-button>
           <el-button round="round" size="small" @click="regUser">注册</el-button>
          <el-button type="info" size="small" round="round" :loading="false" @click="resetFrom">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  // 单文件组件里的data为方法，需要return数据对象
  data() {
    return {
        isLogin:false,
      // 定义一个表单数据绑定对象
      form: {
        username: "",
        password: ""
      },
      rules:{
          username:[
            //   required是否开启为空校验，trigger:"bulr"在鼠标移开的时候校验
              {required:true,message:"账号不能为空",trigger:"blur"},
              {min:3,max:11,message:"长度最少为8，最大为11",trigger:"blur"}
          ],
          password:[
              {required:true,message:"密码不能为空",trigger:"blur"}
              
          ]
      }
    };
  },
  methods:{
    //   点击重置按钮
      resetFrom:function(){
         // console.log(this)
          //通过调用表单的resetFields方法重置
          //有默认值重置的最后为默认值
       var reset=this.$refs.loginFromRef.resetFields()  
      },
      login(){
          //登录前进行表单验证validate
          //第一个参数为是否通过，第二个为验证返回的对象
          this.$refs.loginFromRef.validate((val,obj)=>{
              console.log(val)
              console.log(obj)
              // 验证不通过
              if(!val){
                this.$Message.error("请输入账号密码");
                
              } 
              // 验证通过               传递表单数据
             /* this.$axios.post('login',this.form)
              .then((res)=>{
                console.log(res)
              })*/

              /*将登录成功的token保存在sessionStorage(关闭浏览器被删除)或者localStorge,无时间闲置*/
              /*sessionStorage.key(int index) //返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

                sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。

               sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

               sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。

               sessionStorage.clear() //清除 sessionStorage 对象所有的项。 */  
               
               /*验证后跳转到home页面*/
               window.sessionStorage.setItem('token',"token");
               this.isLogin=true
               var that=this
               setTimeout(function(){
                 that.isLogin=false
                 that.$router.push('/home')
               },2000)

              
              
              
          })
      },
      regUser(){
        // 跳转到注册用户
        this.$router.push('/reg');
        
      }
  }
};
</script>
// scoped样式在该组件显示
<style lang="less" scoped>
.login {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  //  #06b9fb   ace0f9
  background: #06b9fb;
}
.login-body {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 450px;
  height: 300px;
  background: #ffffff;
  transform: translate(-50%, -50%);
  border-radius: 20px;
}
.hread {
  position: absolute;
  top: 0px;
  left: 50%;
  padding: 10px;
  width: 130px;
  height: 130px;
  border: 1px solid #eeeeee;
  box-shadow: 0 0 10px #dddddd;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eeeeee;
  }
}
.login-form{
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.bt{
    display: flex;
    justify-content: center;
}
</style>